<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--填写注册表单过程-->
<form id="from" method="post">
    <table>
        <tr>
            <td>
                用户名：<input name="username" type="text" id="username"><br>
                <span id="username_err" class="err_msg" style="color: red;display: none">用户名格式有误</span>
                <br>
            </td>
        </tr>
        <tr>
            <td>
                密码：<input name="password" type="password" id="password"><br>
                <span id="password_err" class="err_msg" style="color: red;display: none">密码输入格式错误</span>
                <br>
            </td>
        </tr>
        <tr>
            <td>
                手机号：<input name="phone" type="text" id="phone"><br>
                <span id="phone_err" class="err_msg" style="color: red; display: none">手机号必须为11位数字</span>
                <br>
            </td>
        </tr>
        <tr>
            <td>
                <button name="reg_form" id="reg_form">注册</button>
            </td>
        </tr>
    </table>
</form>

<script>
    //1.验证用户名是否符合规则
    //1.1获取用户名输入框
    let usernameInput = document.getElementById("username");
    //1.2绑定onblur事件，失去焦点
    usernameInput.onblur = function () {
        //1.3获取用户输入的用户名
        let username = usernameInput.value.trim();

        //1.4判断用户名是否符合规则：
        // if (username.length >= 6 && username.length <= 12) {
        //     //符合规则
        //     document.getElementById("username_err").style.display = "none";
        // } else {
        //     //不符合规则
        //     document.getElementById("username_err").style.display = "";
        // }
        //使用正则表达式改进
        var reg = /^\w{6,12}$/;
        let flag = reg.test(username);
        if (flag) {
                //符合规则
                document.getElementById("username_err").style.display = "none";
            } else {
                //不符合规则
                document.getElementById("username_err").style.display = "";
            }
    }

    //1.验证密码是否符合规则
    //1.1获取密码输入框
    let passwordInput = document.getElementById("password");
    //1.2绑定onblur事件，失去焦点
    passwordInput.onblur = function () {
        //1.3获取用户输入的密码
        let password = passwordInput.value.trim();

        //1.4判断密码是否符合规则：
        // if (password.length >= 6 && password.length <= 12) {
        //     //符合规则
        //     document.getElementById("password_err").style.display = "none";
        // } else {
        //     //不符合规则
        //     document.getElementById("password_err").style.display = "";
        // }
        //使用正则表达式改进代码
        let reg = /^\w{6,12}$/;
        let flag = reg.test(password);
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = "none";
        } else {
            //不符合规则
            document.getElementById("password_err").style.display = "";
        }
    }
    //1.验证手机号是否符合规则
    //1.1获取手机号输入框
    let phoneInput = document.getElementById("phone");
    //1.2绑定onblur事件，失去焦点
    phoneInput.onblur = function () {
        //1.3获取用户输入的手机号
        let phone = phoneInput.value.trim();

        //1.4判断手机号是否符合规则：
        // if (phone.length == 11) {
        //     //符合规则
        //     document.getElementById("phone_err").style.display = "none";
        // } else {
        //     //不符合规则
        //     document.getElementById("phone_err").style.display = "";
        // }
        //使用正则表达式改进
        let reg = /^[1][3-9]\d{9}$/;
        let flag = reg.test(phone);
        if (flag) {
            //符合规则
            document.getElementById("phone_err").style.display = "none";
        } else {
            //不符合规则
            document.getElementById("phone_err").style.display = "";
        }
    }

    //正则表达式
</script>
</body>
</html>